import React, { Component } from 'react'
import BetterScroll from 'better-scroll'
import axios from 'axios'
export default class App extends Component {
    state={
        name:"学习react",
        filmList:[],
        list:['中文明细','23实际相关的21','dadwad','23213','dwdad2','中文明细','23实际相关的21','dadwad','23213','dwdad2','中文明细','23实际相关的21','dadwad','23213','dwdad2','中文明细','23实际相关的21','dadwad','23213','dwdad2']
    }
//     componentWillMount(){
// console.log(document.querySelectorAll("li"))
//     }
    componentDidMount(){
        console.log(document.querySelectorAll("li"))
        // new BetterScroll('#wrapper')
       
        axios.get(`/test.json`).then((res) => {
            console.log(res.data.data.films);
            this.setState({
              filmList: res.data.data.films,
            });
          });
        //   new BetterScroll('#wrapper2')这里是用不了
          
    }
    
  render() {
      console.log("renderrender");
    return (
      <div>
          <div id='name' style={{height:"30px",backgroundColor:"red",overflow:"hidden"}}>
              <button onClick={()=>{
this.setState({name:"name修改了"})
              }}>点击查看生命周期</button>
              {this.state.name}
          </div>
          {/* <div id='wrapper' style={{height:"180px",backgroundColor:"pink",overflow:"hidden"}}>
              <ul>
                  {
                      this.state.list.map((item,index)=>
                        <li key={index*2}>{item}</li>
                        )
                  }
              </ul>
          </div> */}
          <div id='wrapper2' style={{height:"150px",backgroundColor:"pink",overflow:"hidden"}}>
              <ul>
                  {
                      this.state.filmList.map((item,index)=>
                        <li key={item.filmId}>{item.name}</li>
                        )
                  }
              </ul>
          </div>
      </div>
    )
  }
  UNSAFE_componentWillUpdate(){
console.log('UNSAFE_componentWillUpdate',document.getElementById("name"));
// 调度机制的第一个阶段 可以被高优先级的打断 所以不够安全
  }
  componentDidUpdate(prevProps,preState){
    //   接收两个形参 一个是以前的属性 一个是现在的状态
console.log('componentDidUpdate',document.getElementById("name"),preState.filmList);
//更新后获取dom节点 最安全
// 更新后数据操作betterScroll才可以
if(preState.filmList.length != 0){
    new BetterScroll('#wrapper2')
    console.log("点击了再更新");
}

  }
}
